import React, { useEffect, useState } from 'react'
import { Row, Col, Typography, Button, Switch, Input } from 'antd'
import { Dropdown, Space, Divider, Select } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import aliOssUpload from '@/utils/aliOssUpload';
import { backgroundObj } from '@/utils/utils'
import MangeMask from './components/manageMash';
const { Title } = Typography;
const Setting = (props) => {
    const { data = {}, list, onChange, selectIndex, font_rule, font_length } = props

    const { label, desc, imgsrc, disabled } = data
    const [visible, setVisible] = useState(false);
    const openImagePicker = async () => {
        try {
            const fileHandle = await window.showOpenFilePicker({
                multiple: false, // 设置为 false 表示只能选择一个文件
                types: [
                    {
                        accept: {
                            'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.tiff', '.svg']
                        }
                    }
                ]
            });
            // 处理文件，例如读取内容
            const file = fileHandle.values().next().value;
            const image = await file.getFile();
            const img = await aliOssUpload(image)
            return img.toString()
        } catch (error) {
            console.error(error);
        }
    }
    const defaultImg = ''
    return <Row gutter={[24, 24]}>
        <Col span={24}>
            标题设置
        </Col>
        <Col span={24}>
            <Input onChange={(e) => {
                onChange({
                    data: { label: e.target.value },
                    changeType: 'update',
                    index: selectIndex
                })
            }} value={label}></Input>
        </Col>
        <Col span={24}>
            描述
        </Col>
        <Col span={24}>
            <Input onChange={(e) => {
                onChange({
                    data: { desc: e.target.value },
                    changeType: 'update',
                    index: selectIndex
                })
            }} value={desc}></Input>
        </Col>
        <Col span={24}>
            是否隐藏提交按钮
        </Col>
        <Col span={24}>
            <Switch checked={disabled} onChange={(e) => {
                onChange({
                    data: { disabled: e },
                    changeType: 'update',
                    index: selectIndex
                })
            }}></Switch>
        </Col>
        <Col span={24}>
            设置背景
        </Col>
        <Col style={{ color: '#999999' }} span={24}>
            图片像素建议上传750x320
        </Col>
        <Col span={24}>
            <div style={{ width: 188, height: 88, margin: '24 auto', ...backgroundObj(imgsrc ? imgsrc : defaultImg) }}></div>
        </Col>

        <Col span={24}>
            <Space >
                <Button
                    onClick={(e) => {
                        e.stopPropagation();
                        setVisible({ show: true });
                    }}
                    type="link"
                >
                    选择素材
                </Button>
                <Button
                    onClick={async (e) => {
                        e.stopPropagation();
                        const image = await openImagePicker()
                        if (image) {
                            onChange({
                                data: { imgsrc: image },
                                changeType: 'update',
                                index: selectIndex
                            })
                        }

                    }}
                    type="link"
                >
                    本地上传
                </Button>
            </Space>
        </Col>
        <MangeMask
            handleImage={(e) => {
                setVisible(() => {
                    if (e) {
                        onChange({
                            data: { imgsrc: e.src },
                            changeType: 'update',
                            index: selectIndex
                        })
                    }
                    return false;
                });
            }}
            visible={visible}
            onClose={() => setVisible(false)}
        ></MangeMask>
    </Row>
}
export default Setting